<template>
  <dl class="common-dl hero-contact">
    <dt>
      <i class="iconfont icon-lianxi" />
      <em>{{$t('contact.pd.title')}}</em>
    </dt>
    <dd>
      <span>{{$t('contact.pd.phone')}}</span>
      <strong>{{contact.phone}}</strong>
    </dd>
    <dd>
      <span>{{$t('contact.pd.email')}}</span>
      <strong>{{contact.email}}</strong>
    </dd>
    <dd>
      <span>{{$t('contact.pd.github')}}</span>
      <strong><a
          target="_blank"
          :href="contact.github"
        >{{contact.github}}</a></strong>
    </dd>
    <dd>
      <span>{{$t('contact.pd.homepage')}}</span>
      <strong><a
          target="_blank"
          :href="contact.homepage"
        >{{contact.homepage}}</a></strong>
    </dd>
  </dl>
</template>

<script>
export default {
  name: 'contact',
  props: {
    contact: {
      type: Object,
      default() {
        return {
          phone: '',
          email: '',
          github: '',
          homepage: '',
          wechat: '',
        }
      },
    },
  },
}
</script>
